<template>
    <div class="label-btn border-bottom-1px" :style="bgColorStyle+';'+heightStyle+';'+paddingStyle">
        <span v-if="name" :style="nameColorStyle" class="name">{{name}}</span>
        <span class="txt" :style="txtColorStyle">{{txt}}</span>
        <span  class="right-txt" :style="rightColorStyle">{{rightTxt}}</span>
        <span v-if="canClick" class="iconfont iconarrow_right" :style="rightColorStyle" ></span>
    </div>
</template>

<script>
    export default {
        props:{
            name:null,
            txt:null,
            rightTxt:null,
            bgColor:{
                type:String,
                default:"white"
            },
            nameColor:{
                type:String,
                default:"black"
            },
            txtColor:{
                type:String,
                default:"black"
            },
            rightColor:{
                type:String,
                default:"#6F6F6F"
            },
            canClick:{
                type:Boolean,
                default:true
            },
            height:{
                type:String,
                default:null
            },
            padding:{
                type:String,
                default:null
            }
        },
        computed:{
            heightStyle(){
                return "height:"+this.height
            },
            bgColorStyle(){
               return `background-color: `+this.bgColor
            },
            nameColorStyle(){
                return 'color:'+this.nameColor
            },
            txtColorStyle(){
                return 'color:'+this.txtColor
            },
            rightColorStyle(){
                return 'color:'+this.rightColor
            },
            paddingStyle(){
                return 'padding:'+this.padding
            }
        }
    }
</script>

<style scoped lang="stylus">
    .label-btn
        height 35px
        border-bottom-color #DCDCDC
        padding 0 10px
        display flex
        align-items center
        .name
            flex 0 0 93px
            color $font-color-deep
            font-size 12px
            font-weight 300
            line-height 35px
        .txt
            flex 1
            font-size 11px
            line-height 35px
        .right-txt
            text-align right
            /*flex 1*/
            font-size 10px
            line-height 35px
            margin-right 5px
        .iconarrow_right
            line-height 35px
            font-size 10px
            flex 0 0 12px







</style>